<template>
	<view class="apps">
		<uv-vtabs :chain="chain" :list="list" height="auto"  @change="change">
			<template v-for="(item,index) in list" :key="index">
				<uv-vtabs-item :index="index">
					<view class="flex fdc">
						<view class="ptb20 pl10 f32 fweight6 black">{{item.name}}</view>
						<view class="flex ptb20 plr10" v-for="(item2,index2) in item.child" @click="handle(item2.id)">
							<view style="width:200rpx;" class="mr10">
								<image :src="item2.image" style="width:200rpx;height:100rpx;"></image>
							</view>
							<view class="f1 flex fdc">
								<view class="black f26 fweight4">{{item2.title}}</view>
								<view class="c666 f22 t2hd">{{item2.description}}</view>
							</view>
						</view>
					</view>
					<uv-gap bg-color="#eee" height="5"></uv-gap>					
				</uv-vtabs-item>
			</template>
			<uv-gap bg-color="#fff" height="900"></uv-gap>
		</uv-vtabs>
	</view>
</template>

<script setup>
	import { util } from '/common/util.js';
	import { ref , reactive,nextTick  } from 'vue';
	import { onLoad,onShow,onReachBottom } from '@dcloudio/uni-app'
	const chain = ref(true),list = ref([]),height= ref('100vh')
	
	const change = (index) =>{
		console.log('选项改变：',index)
	},	getList = () =>{
		util.request({url:"/serve/index",type:'get'}).then((rlt)=>{
			list.value = rlt.data
		})
	},  handle = (e)=>{
		uni.navigateTo({
			url:"/pages/service/detail?id="+e,
		})
	}
	onLoad(()=>{
		getList();
	})
</script>

<style scoped lang="scss">
	.item {
		padding: 10rpx 20rpx;
		&-title {
			.text {
				font-weight: 700;
				font-size: 32rpx;
				color: #111;
			}
		}
		&-content {
			padding: 20rpx 0;
			.text {
				line-height: 48rpx;
				font-size: 30rpx;
				color: #111;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
	}
	.gap {
		padding: 0 30rpx;
	}
</style>
